<template>
  <div class="conter_t">
    <div class="conter_left">
      <h3>账户设置</h3>
      <ul class="atv_ll">
        <li class="activas" @click="click11($event)">修改密码</li>
        <li @click="click11($event)">个人信息</li>
        <!--<li @click="click11($event)">我的收藏</li>-->
      </ul>
    </div>
    <div class="conter_right">

      <ul class="atv_rr">
        <li class="zhanghuanquan" >
           <div class="lists">
            <p class="pLeft">当前密码：</p>
            <div class="pRight">
              <input type="password" v-model="name" />
              <p class="name">修改之前最近使用的密码</p>
            </div>
          </div>

          <div class="lists">
            <p class="pLeft">新密码：</p>
            <div class="pRight">
              <input type="password" v-model="password"  @blur="changepassword()" />
              <p class="password">4-8位英文字母或数字</p>
            </div>
          </div>
          <div class="lists">
            <p class="pLeft">确认密码：</p>
            <div class="pRight">
              <input type="password" v-model="passwords"  @blur="changeCount()" />
              <p class="passwords">两次输入密码，与新密码一致</p>
            </div>
          </div>
          <button class="keepS" @click="keepCount()">保存</button>
        </li>


        <li class="zhanghubangding">
           <div class="userList"><span>用户名：</span><span>{{username}}</span></div>
           <div class="userList"><span>用户昵称：</span><input type="text" v-model="usernicheng" /></div>
           <div class="userList">
              <span>性别：</span>
              <el-radio class="radio" v-model="radio" label="1">男</el-radio>
              <el-radio class="radio" v-model="radio" label="0">女</el-radio>
           </div>
           <div class="userList"><span>手机号：</span><input type="text" v-model="numberS" @blur="changenumber()"/>
           <p class="numberOS1"></p>
           </div>

           <div class="userList"><span>邮箱：</span><input type="text" v-model="emailS"  @blur="changeEmail()"/>
            <p class="numberOS2"></p>
           </div>

           <div class="userList"><span>地址：</span><input type="text" v-model="addS" />
            <p class="numberOS3"></p>
           </div>

           <button class="keepS" @click="keepCount2()">保存</button>
        </li>
        <!--<li class="wodeshoucang">-->
          <!--<p>我的收藏</p>-->
        <!--</li>-->
      </ul>
    </div>
  </div>
</template>
<script>
  import options from '../../static/options'
  export default {
    data(){
      return{
        name:"",
        password:"",
        passwords:'',
        passwordO:false,
        passwordsO:false,
        username:sessionStorage.getItem('userName'),
        usernicheng:"",
        radio:'1',
        numberS:'',
        emailS:'',
        addS:'',
        userEmailO:true,
        numberO:true,
        userId:sessionStorage.getItem('userId'),


      }

    },
    methods:{
      changepassword: function() {
             var Expression = /^[0-9a-zA-Z_]{4,8}$/ ;
               var objExp=new RegExp(Expression);
               console.log(this.password)
        if(objExp.test(this.password)==true){
              $(".password").text("密码格式正确")
              $(".password").css("color","green")
              this.passwordO=true
            }else{
              $(".password").text("密码格式不正确")
              $(".password").css("color","red")
              this.passwordO=false
            }

        },
      changeCount: function() {
            if(this.passwords!=this.password){
              $(".passwords").text("两次密码不一致")
              $(".passwords").css("color","red")
              this.passwordsO=false
            }else if(this.passwords==""){
              $(".passwords").text("不能为空")
              $(".passwords").css("color","red")
              this.passwordsO=false
            }else{
              $(".passwords").text("两次密码一致")
              $(".passwords").css("color","green")
              this.passwordsO=true
            }

        },
        changenumber: function() {
            var Expression=/^1[34578]\d{9}$/;
        var objExp=new RegExp(Expression);
            if(objExp.test(this.numberS)==true){
              $(".numberOS1").text("手机号格式正确")
              $(".numberOS1").css("color","green")
              this.numberO=true
            }else{
              $(".numberOS1").text("手机号格式不正确")
              $(".numberOS1").css("color","red")
              this.numberO=false
            }

        },
        changeEmail: function() {
            var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        var objExp=new RegExp(Expression);
            if(objExp.test(this.emailS)==true){
              $(".numberOS2").text("邮箱格式正确")
              $(".numberOS2").css("color","green")
              this.userEmailO=true
            }else{
              $(".numberOS2").text("邮箱格式不正确")
              $(".numberOS2").css("color","red")
              this.userEmailO=false
            }

        },
      keepCount:function(){
        console.log("ppp")
        if(this.passwordO && this.passwordsO && this.name){
            
            var that = this
            $.ajax({
                type: "post",
                url: local+"/awm/userManage/updatePassword",
                data: {
                  password:that.name,
                  newpassword:that.password,
                },
                dataType: "json",

                success: function(data){
                   console.log(data)
                   that.$message(data.message);
                   that.name=''
                   that.password=''
                   that.passwords=''


                },
                error:function(aa){
                  console.log(aa)
                }
              });
        }else if(this.passwordO==false){
              this.$message.error('密码格式不正确');
        }else if(this.passwordsO==false){
              this.$message.error('两次密码不一致');
        }else if(this.name==""){
              this.$message.error('请填写初始密码');
        }
      },
      keepCount2:function(){
        if(this.numberO  && this.userEmailO){
          var that= this
          $.ajax({
                type: "post",
                url: local+"/awm/userManage/updateMessage",
                data: {
                  companyName :that.usernicheng,
                  mobile:that.numberS,
                  userEmail:that.emailS,
                  province:that.addS,
                  sex:that.radio,
                },
                dataType: "json",

                success: function(data){
                   console.log(data)
                   that.$message(data.message);
                  that.addS=""
                  that.numberS=""
                  that.emailS=""
                  that.usernicheng=""
                  $(".numberOS2").text(" ")
                   $(".numberOS1").text(" ")

                },
                error:function(aa){
                  console.log(aa)
                }
              });
        }else if(this.numberO==false){
          this.$message.error('电话号码格式不正确');
        }else if(this.userEmailO==false){
          this.$message.error('邮箱格式不正确');
        }
      },
      click11:function(e){
        $(e.currentTarget).addClass("activas").siblings().removeClass('activas');
        $(".atv_rr li").eq($(e.currentTarget).index()).show().siblings().hide()
        this.zhan_one=true
        console.log()
        if($(e.currentTarget).index()==1){
            this.GRinformations()
        }
        
      },
      GRinformations:function(){
        let that=this
        $.ajax({
          type: "post",
          data: {id: that.userId},
          url:local+"/awm/userManage/userMessage",
          dataType: "json",
          beforeSend:function (xhr) {
            xhr. withCredentials=true
          },
          success: function(data){
            console.log(data.resultData)
              that.usernicheng=data.resultData.companyName 
              that.radio=data.resultData.sex
              that.numberS=data.resultData.mobile
              that.emailS=data.resultData.userEmail
              that.addS=data.resultData.province
          
          },
          error:function(aa){
            console.log(aa)
          }
        })
      },

    },
     
    components:{

    },
    
  }
</script>

<style scoped>
  .conter_t{
    width:1200px;
    height:600px;
    /*background:red;*/
    /*margin:0 auto 40px;*/
  }
  .conter_left{
    width:220px;
    height:490px;
    margin-right:16px;
    background:#fff;
    float:left;
  }

  .conter_left h3{
    width:100%;
    height:40px;
    line-height: 40px;
    font-size:20px;
     background:url(../assets/mywt.png) no-repeat 40px 10px;
  }
  .conter_left ul li{
    width:100%;
    height:36px;
    line-height:34px;
    font-size:17px;
  }
  .conter_right{
    width:calc(100% - 238px);
    height:498px;
    background:#fff;
    float:left;
    border:1px solid #b3b3b3;
  }
  .conter_right ul{
    width:100%;
    height:100%;
    position:relative;
    top:50px;
  }
  .conter_right ul li{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
  }
  .zhanghubangding{
    display: none;

  }

  .activas{
    color:#ff8328;
  }

.lists{
  overflow: auto; zoom: 1;
  height:80px;
  margin:10px auto;
  width:530px;
}

.pLeft{
  float:left;
  height:60px;
  width:120px;
  text-align:right;
  line-height: 40px;
  font-size:16px;
}
.pRight{
  float:right;
  height:60px;
  line-height:35px;
  width:380px;
  text-align:left;
}
.pRight p{
  font-size:10px;
}
.pRight input{
  background:#fff;
  width:280px;
  height:36px;
  text-align:left;
  border:1px solid #bfcbd9;
  text-indent: 10px;


}
.keepS{
  width:100px;
  height:30px;
  background:#ff8328;
  border:0;
  color:#fff;
  border-radius:5px;
}
.userList{
  height:65px;
  width:400px;

  text-align:left;
  margin-left:300px;
  font-size:16px;
}
.userList span{
  display:inline-block;
  width:100px;
  text-align:right;
  padding-right:15px;
}
.userList input{
  height:25px;
  width:250px;
  border:1px solid #ccc;

}
.userList p{
  height:20px;
  margin-left:115px;
  font-size:10px;
  line-heigth:20px;
}
</style>
